<template>
  <div class="">
    <!-- CRUD 组件 -->

    <ma-crud :options="options" :columns="columns" ref="crudRef" class="delivery-list" >
      <template #search-public_number-label="{ searchForm, component }">
        {{  }}
      </template>
      <template #search-public_number="{ searchForm, component }">
        <a-input v-model="searchForm['keywords']" placeholder="请输入提单号/柜号/铅封号"></a-input>
      </template>
      <template #public_number="{ record }" class="block">
        <p>
          <a-link>参考号：{{ record.reference }}</a-link>
        </p>
        <p>运单：{{ record.volume_weight?.shipment_count }}</p>
        <p>货箱：{{ record.volume_weight?.parecl_count }}</p>
      </template>
      <template #operationBeforeExtend="{ record }">
        <p>
          <a-link @click="openPage('info',record)"> 查看详情</a-link>
          <a-link @click="openPage('put',record)"> 扫码装箱</a-link>
        </p>
        <p>
          <a-link @click="openPage('shipment',record)"> 运单列表</a-link>
          <a-link @click="openPage('parcel',record)"> 货箱列表</a-link>
        </p>
        <p>
          <a-popconfirm v-if="currentStatus==1" content="确定封箱吗？" position="bottom" @ok="openPage('close',record)" >
            <a-link> 封箱</a-link>
          </a-popconfirm>
        </p>
      </template>

    </ma-crud>
    <DeliveryInfo ref="deliveryInfoRef"></DeliveryInfo>
    <DeliveryPut ref="deliveryPutRef"></DeliveryPut>
    <ShipmentList ref="shipmentListRef"></ShipmentList>
    <ParcelList ref="parcelListRef"></ParcelList>
  </div>
</template>
<script setup>
import { ref, reactive ,h,inject} from 'vue'
import delivery from '@/api/warehouse/delivery'
import DeliveryInfo from '@/views/h5/delivery/deliveryinfo.vue'
import DeliveryPut from '@/views/h5/delivery/put.vue'
import ShipmentList from '@/views/h5/delivery/ShipmentList.vue'
import ParcelList from '@/views/h5/delivery/ParcelsList.vue'
import dictHelp from "@/utils/dicthelp.js";
const SetConfig = inject('SetConfig')
const config = inject('config')
const crudRef = ref()
const deliveryInfoRef = ref()
const deliveryPutRef = ref()
const shipmentListRef = ref()
const parcelListRef = ref()
const params = ref({page:1,pageSize:10})
const currentStatus = ref(1)
const openPage = async (type,record) =>{
  if(type == 'info'){
    deliveryInfoRef.value.onShow(record)
  }else if(type == 'put'){
    deliveryPutRef.value.onShow(record)
  }else if(type == 'shipment'){
    shipmentListRef.value.onShow(record)
  }else if(type == 'parcel'){
    parcelListRef.value.onShow(record)
  }else if(type == 'close'){
    let res = await delivery.CloseParcel({delivery_id: record.id})
    if(!res.success){
      return
    }
    formData.value.page = 1
    formData.value.end = false
    formData.value.data = []
    crudRef.value.requestData()
  }else{

  }
}
const getDictData = (key, value) => {
    let label = ''
    let dict = crudRef.value.getColumnService().dicts[key];
    if(dict !== undefined && dict.length > 0){
          dict.map(i => {
            if(value && (typeof value) == 'object'){
                for(let index = 0 ; index < value.length ; index++){
                  if (value[index] == i.value) {
                    label += i.label + ' '
                  }
                }
            }else{
              if (value == i.value) {
                label = i.label
              }
            }
          })
    }
    return label
  }
const formData = ref({
  page:1,
  pageSize:10,
  data:[],
  request:false,
  end:false
})
const options = reactive({
  rowSelection: undefined,
  // tablePagination:{style:{display:"none"}},
  pk: 'id',
  size:"mini",
  operationColumnAlign: 'center',
  pageLayout:'fixed',
  operationColumn: true,
  searchColNumber: 1,
  showTools:false,
  bordered: { wrapper: true, cell: false },
  stripe: false,
  // openPage:true,
  // pageSize:20,
  scroll: { x: '0', y: config.value.height -75 +'px' },
  beforeSearch: (requestParams) => {
    formData.value.page = 1
    formData.value.end = false
    formData.value.data = []
    return requestParams
  },
  beforeRequest: (requestParams) => {
    requestParams.page = formData.value.page
    requestParams.refresh_tabs = 0
    return requestParams
  },
  afterRequest: (tableData) => {
    formData.value.data = formData.value.data.concat(tableData)
    // console.log(formData.value.data)
    if(tableData.length < formData.value.pageSize){
      formData.value.request = false
      formData.value.end = true
      return formData.value.data
    }
    // 获取你想要添加滚动事件的元素
    var scrollableElement = document.getElementsByClassName('arco-scrollbar-container')[2];
    // 使用 addEventListener 添加滚动事件监听器
    scrollableElement.addEventListener('scroll', function(event) {
      if(event.target.scrollTop > event.target.scrollHeight - config.value.height + 75){
        if(formData.value.request || formData.value.end){
          return;
        }
        formData.value.request = true
        formData.value.page = formData.value.page + 1
        crudRef.value.requestData()
      }
    });
    formData.value.request = false
    return formData.value.data
  },
  contextMenu: {
    // 是否开启右键菜单
    enabled: false,
  },
  api: delivery.getList,
  tabs: {
    dataIndex: 'status',
    type: 'rounded',
    size:'mini',
    data:[
      {
        label: '待出货',
        value: '1',
      },
      {
        label: '已出货',
        value: '2',
      },
      {
        label: '已接收',
        value: '3',
      },
    ],
    onClick: (value) => {
      formData.value.page = 1
      formData.value.data = []
      formData.value.end = false
    },
    onChange: (value) => {
      currentStatus.value = value
    },
  },
})

const columns = reactive([
  {
    title: "提单",
    dataIndex: "public_number",
    align:'left',
    search:true,
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "select",
    search: true,
    hide: true,
    dict: {
      name: 'DeliveryStatus',
      translation: true
    },
  },
  {
      title: "船期/航班",
      dataIndex: "shipping_schedule_id",
      formType: "select",
      hide:true,
      dict: dictHelp.shipping_schedule,
  },
  {
      title: "出发地",
      dataIndex: "departure",
      formType: "select",
      dict: dictHelp.place,
      hide:true
  },
  {
      title: "目的地",
      dataIndex: "destination",
      formType: "select",
      addDisplay: false,
      dict: dictHelp.place,
      hide:true
  },
])
</script>

<style>
.delivery-list .arco-tabs-nav-type-rounded .arco-tabs-tab{
  margin:auto;
  padding: 5px 8px;
  font-size: smaller;
}
.delivery-list .arco-scrollbar-container .arco-space{
  display: inline-flex;
  font-size:small;
  flex-direction: column;
}
.delivery-list .arco-form-item{
  display:block;
  margin:0;
}
.delivery-list .arco-col-21{
    flex: 0 0 75%;
    width: 75%;
}
.delivery-list .arco-col-3{
    flex: 0 0 25%;
    width: 25%;
}

.delivery-list .arco-col-3 .arco-space-item:nth-child(2),.delivery-list ._crud-footer{
    display:none;
}
.delivery-list .arco-col-3 .arco-btn,.delivery-list .arco-col-3 .arco-space-align-center,
.delivery-list .arco-col-3 .arco-space-item{
      
    width:100%;
}
.delivery-list .arco-link-status-normal{
  color:#333;
}

</style>